<script setup>
import { reactive, ref,defineExpose } from 'vue'
import UploadList from '@/components/app/uploadList.vue'
import EditLink from '@/components/app/chooseAdjunct.vue'
import EditMiniprogram from '@/components/app/editMiniprogram.vue'
import { Plus } from '@element-plus/icons-vue'
const ruleFormRef = ref()
const imgFormRef = ref()
const dialogFormVisible = ref(false)
const tempPic = reactive({
	title: '',
	url: ''
})
const addName = () => {
	ruleForm.content += '用户昵称'
}
const adjunctData = ref([])
const editMiniprogram = ref()
const showMinip = () => {
	// editMiniprogram.value.show()
	var data = {
		title:'',
		img:'',
		appId:'',
		appUrl:''
	}
	editMiniprogram.value.show(data)
}
const getDialogueData1 = (val) => {
	if(editindex.value){
		console.log(val)
		var data = {
			miniprogram_title:val.title,
			miniprogram_imgurl:val.img,
			miniprogram_appid:val.appId,
			miniprogram_page:val.appUrl,
			type:3
		}
		// var arr = adjunctData.value
		// val.type = 3
		// arr.push(val)
		// adjunctData._value = arr
		ruleForm.welcome_data[editindex.value]=data
		editindex.value=false
		handleRefresh()
	}else{
		console.log(val)
		var data = {
			miniprogram_title:val.title,
			miniprogram_imgurl:val.img,
			miniprogram_appid:val.appId,
			miniprogram_page:val.appUrl,
			type:3
		}
		// var arr = adjunctData.value
		// val.type = 3
		// arr.push(val)
		// adjunctData._value = arr
		ruleForm.welcome_data.push(data)
		handleRefresh()
	}
	
}
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const editLink = ref(null)
const clickLink = () => {
	// editLink.value.show()
	var data = {
		link_desc: "",
		link_picurl: "",
		link_title: "",
		link_url: ""
	}
	editLink.value.show(data)
}
const clickImg = (item) => {
	tempPic.title='',
	tempPic.url= ''
	dialogFormVisible.value = true
}
const getDialogueData = (val) => {
	if(editindex.value){
		console.log(val)
		val.type=2
		// var arr = adjunctData.value
		// val.type = 2
		// arr.push(val)
		// adjunctData._value = arr
		ruleForm.welcome_data[editindex.value]=val
		editindex.value=false
		console.log(ruleForm.welcome_data)
		handleRefresh()
	}else{
		console.log(val)
		val.type=2
		// var arr = adjunctData.value
		// val.type = 2
		// arr.push(val)
		// adjunctData._value = arr
		ruleForm.welcome_data.push(val)
		console.log(ruleForm.welcome_data)
		handleRefresh()
	}
	
}
const cancelAdjunct = (type) => {
	if(editindex.value){
		var data = {
			type:1,
			url:tempPic.url,
			title:tempPic.title
		}
		dialogFormVisible.value = false
		tempPic.title='',
		tempPic.url= ''
		
		ruleForm.welcome_data[editindex.value]=data
		editindex.value=false
	}else{
		var data = {
			type:1,
			url:tempPic.url,
			title:tempPic.title
		}
		dialogFormVisible.value = false
		tempPic.title='',
		tempPic.url= ''
		
		ruleForm.welcome_data.push(data)
	}
	
}
const getUploadImg = (val) => {
	tempPic.url = val.url
}
const rules = reactive({
	welcome_type: [
		{
			required: true,
			message: '好友欢迎语不能为空',
			trigger: 'change'
		}
	]
})
const ruleForm = reactive({
	welcome_type: 1,
	content: '',
	tag: false,
	tagList: [],
	desc: false,
	descText: '',
	remark: false,
	remarkText: '',
	type:'',
	name:'',
	staffs:[],
	remin_status:'',
	ttime:'',
	task_state:'',
	promotion_welcome:'',
	promotion_type:'',
	end_time:'',
	welcome_data:[
		// {
		// 	type:'1',
		// 	url:'',
		// 	title:'',
		// 	link_title:"",
		// 	link_picurl:'',
		// 	link_desc:'',
		// 	link_url:'',
		// 	miniprogram_title:'',
		// 	miniprogram_imgurl:'',
		// 	miniprogram_appid:'',
		// 	miniprogram_page:'',
		// }
	]
})
const deleteenclosure=(val)=>{
	ruleForm.welcome_data.splice(val,1)
}
const editindex=ref(false)
const showDialog=(val,index)=>{
	console.log(val)
	editindex.value=index
	if(val.type == 1){
		tempPic.title=val.title,
		tempPic.url= val.url
		dialogFormVisible.value = true
	}else if(val.type == 2){
		editLink.value.show(val)
	}else{
	// 	var data = {
	// 	miniprogram_title:val.title,
	// 	miniprogram_imgurl:val.img,
	// 	miniprogram_appid:val.appId,
	// 	miniprogram_page:val.appUrl,
	// 	type:3
	// }
	var data = {
		title:val.miniprogram_title,
		img:val.miniprogram_imgurl,
		appId:val.miniprogram_appid,
		appUrl:val.miniprogram_page
	}
	editMiniprogram.value.show(data)
	}
}
const submitForm = async () => {
	if (!ruleFormRef.value) return
	await ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}
const show = (val)=>{
	console.log(val)
	ruleForm.type = val.type
	ruleForm.name = val.name
	ruleForm.staffs = val.staffs
	ruleForm.remin_status = val.remin_status
	ruleForm.ttime = val.ttime
	ruleForm.task_state = val.task_state
	ruleForm.promotion_welcome = val.promotion_welcome
	ruleForm.promotion_type = val.promotion_type
	ruleForm.end_time = val.end_time
	console.log(ruleForm)
}
const shows = ()=>{
	return ruleForm
}	

defineExpose({
  show,shows
})
</script>
<template>
	<div class="post-warp">
		<div class="post-left">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
				<el-form-item label="好友欢迎语：" prop="welcome_type">
					<el-radio-group v-model="ruleForm.welcome_type">
						<el-radio :label="1">推广欢迎语</el-radio>
						<!-- <el-radio :label="2">默认欢迎语</el-radio> -->
						<el-radio :label="2">不发送欢迎语</el-radio>
					</el-radio-group>
				</el-form-item>
				<div class="text-area-box" v-if="ruleForm.welcome_type === 1">
					<div class="insert-btn"><span @click="addName" class="clickable no-select">[插入客户昵称]</span></div>
					<el-input
						v-model="ruleForm.content"
						:autosize="{
							minRows: 8
						}"
						maxlength="1200"
						placeholder="请输入任务说明"
						show-word-limit
						type="textarea"
						resize="none"
					/>
					<div class="option-box">
						
						<el-popover ref="popover" placement="top" trigger="click" popper-class="my-el-popover">
							<template #reference>
								<div @click="openDialog" style="display: flex; color: #1890ff; align-items: center; cursor: pointer">
									<el-icon style="margin-top: 0px; margin-right: 4px">
										<CirclePlus />
									</el-icon>
									<div>添加附件</div>
								</div>
							</template>
							<div class="dialogContent" label="图片" @click="clickImg">
								<el-icon :size="18">
									<PictureFilled />
								</el-icon>
								<div style="margin-left: 5px">图片</div>
							</div>
							<div class="dialogContent" @click="clickLink">
								<el-icon :size="18">
									<Link />
								</el-icon>
								<div style="margin-left: 5px">链接</div>
							</div>
							<div class="dialogContent" @click="showMinip">
								<i class="iconfont">&#xe63a;</i>
								<div style="margin-left: 5px">小程序</div>
							</div>
						</el-popover>
						
					</div>
					<div class="app-flex-2" style="padding: 7px;border-bottom: 1px solid #eee;" v-for="(item,index) in ruleForm.welcome_data" :key="index">
                          <div class="app-flex-left">
                            <span class="app-close-circle" @click="deleteenclosure(index)">
                              -
                            </span>
                            <span>
                              【<span v-if="item.type == 1">图片</span>
                              <span v-else-if="item.type == 2">链接</span>
                               <span v-else-if="item.type == 3">小程序</span>】:
                            </span>
                            <span class="app-gap-words-left-s" v-if="item.type == 1">{{ item.title }}</span>
                            <span class="app-gap-words-left-s" v-if="item.type == 2">{{ item.link_title }}</span>
                            <span class="app-gap-words-left-s" v-if="item.type == 3">{{ item.miniprogram_title }}</span>
                          </div>
                          <MyIcon @click="showDialog(item,index)" class="app-pointer app-icon " name="Edit" />
                        </div>
				</div>
				<el-form-item style="margin-bottom: 0" label="客户标签：" prop="is_tag">
					<el-switch style="margin-right: 8px" v-model="ruleForm.is_tag" :active-value="1"
      :inactive-value="2" />{{ ruleForm.is_tag ? '已开启' : '已关闭' }}
				</el-form-item>
				<el-form-item :style="{ marginBottom: ruleForm.is_tag==1 ? '0px' : '20px' }">
					<p class="switch-desc">开启后可为客户添加标签,方便企业运营</p>
				</el-form-item>
				<el-form-item v-if="ruleForm.is_tag == 1">
					<el-button @click="chooseStaff" type="primary" plain style="height: 36px; border-radius: 4px" :icon="Plus"
						>添加标签</el-button
					>
				</el-form-item>
				<el-form-item style="margin-bottom: 0" label="客户备注：" prop="desc">
					<el-switch style="margin-right: 10px" v-model="ruleForm.is_bz" :active-value="1"
      :inactive-value="2" />
					{{ ruleForm.is_bz == 1 ? '已开启' : '已关闭' }}
				</el-form-item>
				<el-form-item :style="{ marginBottom: ruleForm.is_bz == 1 ? '0px' : '20px' }">
					<p class="switch-desc">
						开启后可为客户昵称加备注，方便查看客户来源
						<el-tooltip effect="light" placement="bottom">
							<template #content>
								<img style="width: 450px" src="@/assets/img/img/live-code_note-example-img.3da305e0b748.png" alt="" />
							</template>
							<span class="btn-text">查看示例</span>
						</el-tooltip>
					</p>
				</el-form-item>
				<el-form-item v-show="ruleForm.is_bz == 1">
					<el-input
						style="width: 80%"
						v-model="ruleForm.bz"
						show-word-limit
						maxlength="10"
						placeholder="请输入客户备注（备注将展示在客户昵称后）"
					>
						<template #prepend>客户昵称-</template>
					</el-input>
				</el-form-item>
				<el-form-item v-show="ruleForm.is_bz == 1">
					<div class="preview-box">
						<span>预览：</span>
						<div class="right-preview">
							<img
								src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-default.af3289dacfcf.svg"
								class="client-avatar"
							/>
							<span class="client-note">
								客户昵称- <span class="note-name">{{ ruleForm.bz }}</span></span
							>
						</div>
					</div>
				</el-form-item>
				<el-form-item style="margin-bottom: 0" label="客户描述：" prop="is_describe">
					<el-switch style="margin-right: 8px" v-model="ruleForm.is_describe" :active-value="1"
      :inactive-value="2" />{{ ruleForm.is_describe == 1 ? '已开启' : '已关闭' }}
				</el-form-item>
				<el-form-item :style="{ marginBottom: ruleForm.is_describe == 1 ? '0px' : '20px' }">
					<p class="switch-desc">
						开启后可为客户添加描述，将在客户画像里展示
						<el-tooltip effect="light" placement="bottom">
							<template #content>
								<img style="width: 450px" src="@/assets/img/img/live-code_note-example-img.3da305e0b748.png" alt="" />
							</template>
							<span class="btn-text">查看示例</span>
						</el-tooltip>
					</p>
				</el-form-item>
				<el-form-item v-if="ruleForm.is_describe == 1" style="margin-top: -12px" prop="remarkText">
					<el-input
						v-model="ruleForm.describe"
						:autosize="{
							minRows: 8
						}"
						maxlength="150"
						placeholder="请输入客户描述内容"
						show-word-limit
						type="textarea"
						resize="none"
					/>
				</el-form-item>
			</el-form>
		</div>
		<div class="post-right">
			<div class="preview-wrap">
				<img src="https://assets.weibanzhushou.com/web/we-work-webapp/phone.1c130fa643cd.png" class="bg" />
				<div class="preview-content">
					<ul v-if="ruleForm.content" class="reply-list">
						<li>
							<img src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-default.af3289dacfcf.svg" />
							<div class="msg text">{{ ruleForm.content }}</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 点击图片弹窗 -->
		<el-dialog v-model="dialogFormVisible" center title="添加图片" width="30%">
			<el-form ref="imgFormRef" :model="imgForm" :rules="rules" label-width="80px">
				<el-form-item label="图片标题:">
					<el-input v-model="tempPic.title" />
				</el-form-item>
				<el-form-item label="图片:" prop="img">
					<UploadList :uploadType="{ type: 'image' }" text="上传图片" @getImg="getUploadImg($event, val)" />
				</el-form-item>
				<el-form-item style="position: relative">
					<div style="right: 10px; position: absolute">
						<el-button @click="cancelAdjunct">取消</el-button>
						<el-button type="primary" @click="cancelAdjunct">确定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		<EditLink @getDialogueData="getDialogueData($event, val)" ref="editLink" />
		<EditMiniprogram @getDialogueData="getDialogueData1($event, val)" ref="editMiniprogram" />
	</div>
</template>
<style lang="scss" scoped>
@import '@/style/iconfont.css';
ul {
	list-style: none;
	padding: 0;
}
.btn-text {
	color: #1890ff;
	cursor: pointer;
}
.switch-desc {
	font-size: 13px;
	color: #8c8c8c;
	font-weight: 400;
}
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.dialogContent {
	display: flex;
	margin: 10px 0;
	padding: 10px;
	cursor: pointer;
}

.dialogContent:hover {
	width: 150px;
	background-color: #ecf8fe;
	padding-left: 23px;
	margin-left: -13px;
}
.post-warp {
	display: flex;
	width: 100%;
	height: 100%;

	.post-left {
		width: 55%;
		.text-area-box {
			width: 94%;
			background: #fbfbfb;
			border-radius: 2px;
			border: 1px solid #eee;
			font-size: 14px;
			line-height: 20px;
			margin-bottom: 20px;
			-webkit-box-flex: 1;
			flex: 1;
			.insert-btn {
				border-bottom: 1px dashed #e9e9e9;
				padding: 8px 16px;
				color: #e8971d;
				.clickable {
					cursor: pointer;
					user-select: none;
				}
			}

			.option-box {
				display: flex;
				align-items: center;
				padding: 8px 16px;
				border-top: 1px solid #eee;
			}
		}
		.preview-box {
			display: flex;
			align-items: center;

			.right-preview {
				display: flex;
				align-items: center;
				height: 50px;
				background: #fff;
				border-radius: 4px;
				border: 1px solid #dcdfe6;
				padding: 0 10px;
				color: rgba(0, 0, 0, 0.45);
				.client-avatar {
					margin-right: 10px;
					width: 34px;
					height: 34px;
					border-radius: 2px;
					-o-object-fit: cover;
					object-fit: cover;
				}
			}
		}
	}
	.post-right {
		width: 45%;
		height: 100%;
		.preview-wrap {
			position: relative;
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 274px;
			}
			.preview-content {
				width: 225px;
				height: 345px;
				position: relative;
				z-index: 2;
				left: 24px;
				top: 98px;
				display: -webkit-box;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				flex-direction: column;
				max-height: 345px;
				overflow-x: hidden;
				overflow-y: auto;
				.reply-list {
					padding-left: 12px;
					overflow: auto;
					height: 97%;
					overflow-x: hidden;
					li {
						display: -webkit-box;
						display: flex;
						-webkit-box-align: start;
						align-items: flex-start;
						margin-top: 10px;
						font-size: 14px;
						color: #000000a6;
						img {
							width: 26px;
							height: 26px;
						}
						.text {
							width: 148px;
							margin-left: 10px;
							border-radius: 4px;
							background: #fff;
							padding: 8px 13px;
							word-break: break-all;
							white-space: pre-wrap;
						}
					}
				}
			}
		}
	}
}
</style>
